A line chart with two colors

A range Line chart with dual colors. This range chart is combined with the drawing API Poly object so that the range can be given a tooltip.

This goes in the documents header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.dynamic.poly.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
        window.onload = function ()
        {
            var d1  = [];
            var d2  = [];
            var val = 47;
            
            // Create the data
            for (var i=0; i<100; i+=1) d1[i] = RGraph.random(45,55);
            for (var i=0; i<100; i+=1) d2[i] = RGraph.random(25,35);

        
            var line = new RGraph.Line({
                id: 'cvs',
                data: [d1, d2],
                options: {
                colors: ['gray','gray'],
                    backgroundGridAutofitNumhlines: 10,
                    hmargin: 10,
                    filled: true,
                    filledRange: true,
                    filledRangeThreshold: 0,
                    filledRangeThresholdColors: ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)'],
                    labels: [
                        '', 'Q1', '',
                        '', 'Q2', '',
                        '', 'Q3', '',
                        '', 'Q4', ''
                    ],
                    numxticks: 8,
                    linewidth: 1,
                    ymax: 60,
                    tickmarks: null,
                    textAccessible: true
                }
            }).trace();
                
                
                
            
            var coords = []
            for (var i=0; i<(line.coords.length/2); i+=1) {
                coords.push(line.coords[i])
            }
            for (var i=(line.coords.length - 1); i>=(line.coords.length/2); i-=1) {
                coords.push(line.coords[i])
            }

            var poly = new RGraph.Drawing.Poly({
                id: 'cvs',
                coords: coords,
                options: {
                    fillstyle: 'rgba(0,0,0,0)',
                    strokestyle: 'rgba(0,0,0,0)',
                    tooltips: ['The range chart'],
                    highlightFill: 'rgba(255,255,255,0.3)'
                }
            }).draw();
        };
</script>